<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Watchlist</title>
    <link href="css/font.css" rel="stylesheet" type="text/css" media="all" />
    <link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
    <!-- Custom Theme files -->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- Custom Theme files -->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/respond.js"></script>
    <!-- Custom Theme files -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

    <!--webfont-->
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
            });
        });
    </script>
   
    <script>
        $(function(){
            $(".hov").hide();
            $(".text").hide();
            $(".col-md-3").hover(function(){
                        $(this).find(".hov").stop().fadeTo(286,0.5)
                        $(this).find(".text").stop().show();
                    },
                    function(){
                        $(this).find(".hov").stop().fadeTo(286,0)
                        $(this).find(".text").stop().hide();
                        // $(this).find(".text").animate({left:"-286px"}, {duration: 0})
                    });
        });
    </script>
    <style>
        html {
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%;
        }

        body
        {
            margin: 0;
        }

        .main-nav-a a:hover{
            color:#ff5656;
        }

        .main-nav-a a:focus{
            color:#ff8e92;
        }

        a span
        {
            font-size: 20px;
            font-weight: 700;
        }

        /*********************************************自定义部分*********************************************/
        .secondmenu a {
            font-size: 12px;
            color: #4A515B;
            text-align: center;
            border-radius: 4px;
        }

        .secondmenu > li > a:hover {
            background-color: rgba(179,137,68,0.7);
            color: #ffffff;
        }

        .secondmenu>li.focus {
            background-color: rgba(222,202,196,0.5);
            border-radius: 4px;
            color:#ff5656;
        }

        .secondmenu li.focus > a {
            color: #ff5656;
        }


    </style>
</head>
<body>
<!-- header-section-starts -->

<div class="navigation-strip">
    <div class="container">
        <div class="nav_content">
            <div class="home">
                <a href="index.html"><img src="images/imangine.png" alt="" /></a>
            </div>
            <div class="search">
                <form>
                    <input type="text" value="" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Search..';}"/>
                    <input type="submit" value="">
                </form>
            </div>
            <div class="reglogbar-user pull-right">
                <div class="userp">
                     <span>Jully Coco &nbsp;</span>
                    <a href="personal.html"> <img src="images/user-p.png" /> </a>
                </div>
            </div>
            <span class="menu"></span>
            <div class="top-menu">
                <ul>
                    <li><a class="active" href="pic.html">Picture</a></li>
                    <li><a href="album.html">Album</a></li>
                    <li><a href="group.html">Group</a></li>
                    <li><a href="search.html">Search</a></li>
                    <li><a href="about.html">About us</a></li>
                    <div class="clearfix"></div>
                </ul>
            </div>
            <!-- script for menu -->
            <script>
                $( "span.menu" ).click(function() {
                    $( ".top-menu" ).slideToggle( "slow", function() {
                        // Animation complete.
                    });
                });
            </script>
            <!-- script for menu -->
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="content">
    <div class="container">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <ul id="main-nav" class="main-nav nav nav-tabs nav-stacked" style="">
                        <li class="main-nav-a">
                            <a href="personal.html">
                                <i class="glyphicon glyphicon-th-large"></i>
                                <span>Personal Information</span>
                            </a>
                        </li>
                        <li class="main-nav-a">
                            <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
                                <i class="glyphicon glyphicon-cog"></i>
                                <span>Modify Information</span>
                                <span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
                            </a>
                            <ul id="systemSetting" class="nav nav-list secondmenu collapse" style="height: 0px;">
                                <li><a href="personal-modify.html"><i class="glyphicon glyphicon-user"></i>&nbsp;<span>Modify Basic Info</span> </a></li>
                                <!--<li><a href="#"><i class="glyphicon glyphicon-th-list"></i>&nbsp;--</a></li>-->
                                <!--<li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>&nbsp;--</a></li>-->
                                <!--<li><a href="#"><i class="glyphicon glyphicon-edit"></i>&nbsp;--</a></li>-->
                                <!--<li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>&nbsp;--</a></li>-->
                            </ul>
                        </li>
                        <li class="main-nav-a">
                            <a href="#disSetting" class="nav-header collapsed" data-toggle="collapse">
                                <i class="glyphicon glyphicon-globe"></i>
                                <span>Firends Circle</span>
                                <span class="pull-right glyphicon glyphicon-chevron-toggle"></span>
                            </a>
                            <ul id="disSetting" class="nav nav-list secondmenu collapse">
                                <li><a href="watchlist.html"><i class="glyphicon glyphicon-th-list"></i>&nbsp;<span>My Watchlist</span></a></li>
                            </ul>

                        </li>

                        <!--<li class="main-nav-a">-->
                        <!--<a href="#dicSetting" class="nav-header collapsed" data-toggle="collapse">-->
                        <!--<i class="glyphicon glyphicon-bold"></i>-->
                        <!--字典配置-->
                        <!--<span class="pull-right glyphicon glyphicon-chevron-toggle"></span>-->
                        <!--</a>-->
                        <!--<ul id="dicSetting" class="nav nav-list secondmenu collapse">-->
                        <!--<li><a href="#"><i class="glyphicon glyphicon-text-width"></i>&nbsp;关键字配置</a></li>-->
                        <!--</ul>-->
                        <!--</li>-->
                        <li class="main-nav-a">
                            <a href="news.html">
                                <i class="glyphicon glyphicon-fire"></i>
                                <span>News</span>
                                <span class="badge pull-right">1</span>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="col-md-9 watchlist">
                    <div class="watchlista">Total &nbsp; <span>5</span> &nbsp; people</div>
                    <div class="watch-list">
                        <div class="row">
                            <span class="line2"></span>
                        </div>
                        <div class="row">
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="userl">
                                <div class="col-md-2 watchp"> <img src="images/user-p.png"></div>
                                <div class="col-md-4 watchl">
                                    <label>Mint</label>
                                    <p>Please dont starve together</p>
                                </div>
                            </div>
                        </div>


                        <div class="clearfix"></div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="footer-top">
        <div class="container">
            <div class="col-md-4 footer-grid">
                <h5>ABOUT US</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor nulla, sodales quis posuere quis, tristique nec libero. Proin vitae convallis odio. Morbi nec enim nisi. Aliquam erat volutpat. </p>
            </div>
            <div class="col-md-4 footer-grid">
                
            </div>
            <div class="col-md-4 footer-grid">
                <h5>FOLLOW US</h5>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla in purus nibh. Donec ornare felis neque. Nullam tortor! </p>


            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="container">
            <div class="copyrights">
                <p>Copyright &copy; 2015.Imangine All rights reserved.</p>
            </div>
            <div class="go-top">
                <a href="#header" class="scroll"><img src="images/go-to-top.png" alt="" /></a>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

</body>
</html>